import classnames from 'classnames';
import React, { Component, CSSProperties, ReactNode } from 'react';
import styles from './ScaleImage.less';

interface IScaleImageState {
  isBlow: boolean;
}
interface IScaleImageProps {
  src: string;
  className?: string;
  style?: CSSProperties;
  blowWidth?: string;
  blowHeight?: string;
}

class ScaleImage extends Component<IScaleImageProps, IScaleImageState> {
  constructor(props: IScaleImageProps) {
    super(props);
    this.state = {
      isBlow: false,
    };
  }

  public render(): ReactNode {
    const { src, className, style, blowWidth = 200, blowHeight = 200 } = this.props;
    const { isBlow } = this.state;
    return (
      <div className={classnames(styles.ScaleImage, className)} style={style}>
        <div
          className={styles.Mask}
          onClick={() => {
            this.setState({ isBlow: false });
          }}
        />
        <img
          onClick={() => {
            this.setState({ isBlow: true });
          }}
          src={src}
          style={isBlow ? { width: blowWidth, height: blowHeight } : { width: '100%' }}
          alt=""
        />
      </div>
    );
  }
}

export default ScaleImage;
